You can create triangle or arrow shapes using only CSS by leveraging pseudo-elements with borders. By setting the width and height to 0 and applying different border colors, you can make triangles pointing in various directions.

Key Points

1
Triangles are made by setting width and height to 0 and applying border properties.
2
The color of the visible border determines the triangle's color; other borders are set to transparent.
3
Use ::before or ::after pseudo-elements to add arrows or triangles without extra HTML.
4
Position the pseudo-element relative to the parent element to place the arrow as needed.

Example: Downward Arrow Using ::after

In this example, the ::after pseudo-element creates a black downward-pointing arrow below the .arrow element. The arrow is formed using CSS borders and requires no extra HTML elements.

Best Practices

1
Use pseudo-elements for decorative arrows or pointers instead of adding extra HTML markup.
2
Adjust border sizes and colors to control the direction and appearance of the triangle.
3
Combine with position and transform to precisely place the arrow relative to the parent.
4
Test across browsers to ensure the borders render correctly for different arrow directions.

Difficulty: 3/10

Topics: CSS pseudo-elements, CSS triangle technique, border-based shapes

Scenario Questions

0-2 years experience

1
How would you create a downward-pointing arrow using only CSS pseudo-elements, and what CSS properties would you need to adjust to change its size?
2
If you apply a background color to the element and also try to create a triangle with borders, why might the triangle not show up as expected?

2-5 years experience

1
A tooltip arrow is misaligned on mobile — the triangle looks distorted. What could be causing this, and how would you debug it?
2
We’re using a CSS triangle as a dropdown indicator, but it flickers on scroll in Safari. What’s likely happening, and how would you fix it without switching to SVG?

5-8 years experience

1
We’re building a scalable icon system and considering CSS triangles for arrows instead of SVGs. What are the performance, accessibility, and maintainability tradeoffs you’d evaluate?
2
In a design system, we need 8 different arrow directions with varying sizes and colors. How would you structure the CSS to avoid duplication and ensure consistency across themes?

8+ years experience

1
Our legacy UI relies heavily on CSS triangles for tooltips and indicators, but we're migrating to a component library with SVG icons. What’s your strategy for phasing this out without breaking existing layouts or accessibility?
2
Across multiple teams, we’ve seen inconsistent implementations of CSS arrows — some use borders, others use transforms or clip-path. How would you establish a cross-team standard that balances performance, maintainability, and future-proofing?

Follow-up Questions

❓What happens if you set the element's width to auto instead of 0?
❓How would you make the arrow point in a different direction without rewriting the CSS?
❓Why might this approach break in a high-contrast mode or dark theme?